<template>
    <div id="myCard">
        <header class="header"><router-link to='/mine?type=3' class="toreturn"><i class="el-icon-arrow-left"></i></router-link>我的文章<router-link to='/card/addArticle' class="addArt"><i class="el-icon-edit-outline"></i></router-link></header>
        <div class="artLists">
            <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                <ul>
                    <li @click="toUrl(item.id)" class="artList" v-for="(item,index) in artArr" :key="index">
                        <div class="artListUp">
                            <span class="title">标题：{{item.ctitle}}</span>
                            <div>
                                <span class="artDate">{{timeBetween(item.ddate)}}</span>
                                <span class="todel" @click="toedit(item)"><i class="el-icon-edit"></i></span>
                                <span class="todel" @click="beforeDel(item)"><i class="iconfont icon-icon_delete"></i></span>
                            </div>
                        </div>
                        <div class="artDetail">
                            <span class="commentnum">阅读：{{item.iaccount ?item.iaccount :0 }}</span>
                            <span class="looknum">评论：{{item.iatcount?item.iatcount :0}}</span>
                        </div>
                    </li>
                </ul>
            </scroller>
        </div>
        <!-- 删除提示框 -->
        <el-dialog
            id="tosureDelete"
            :visible.sync="deleteVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认要删除这篇文章吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteVisible = false">取 消</el-button>
                <el-button type="primary" @click="toDeleteArt">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框结束 -->
    </div>
</template>

<script>
import {getArtList,deleteArt} from '../../../js/dataServe'
const perPage = 10;
export default {
    data(){
        return {
            artArr:[],
            deleteVisible:false,
            art:'',
            pageNo:1
        }
    },
    components:{},
    created(){
        // this.$store.commit('changeShowit',{val:false})
    },
    mounted(){
        this.$store.commit('emptyPublicCard')
    },
    methods:{
        infinite(done) {
                let self = this;
                let responseData = getArtList(sessionStorage.uid,self.pageNo);
                responseData.then((res)=>{
                                        if(res.data && res.data.list.length>0){
                                           
                                            let lists = res.data.list;
                                            lists.forEach((v,k)=>{
                                                if(self.artArr.indexOf(v)==-1){
                                                    self.artArr.push(v)
                                                }
                                            })
                                            self.pageNo++;
                                            done();
                                            
                                        }else{
                                            self.$refs.my_scroller.finishInfinite(2);
                                        }
                                    })
        },
        // async infinite(done) {
        //         let cards = [];
        //         let self = this;
        //         if(cards.length == 0){
        //                 let responseData = getArtList(sessionStorage.uid);
        //             await responseData.then((res)=>{
        //                                             if(res.result == 1){
        //                                                 let lists = res.data.list.reverse();
        //                                                 lists.forEach( (item,key) => {
        //                                                     cards.push(item)
        //                                                 })
        //                                             }
        //                                         })
        //             }
        //         let pageNum = Math.ceil(cards.length/perPage);
        //         // console.log(cards)
        //         if(self.nowPage>pageNum){
        //             self.$refs.my_scroller.finishInfinite(2);
        //             return;
        //         }else{

        //             for (let i = (self.nowPage-1)*perPage; i < perPage*self.nowPage; i++) {
        //                 if(cards[i]){
        //                     self.artArr.push(cards[i]);
        //                 }
        //             }
        //             self.nowPage++;
        //             done()
        //         }
            

        //     },
        refresh(done) {
            done()
        },
        toDeleteArt(){
            if(sessionStorage.sid){
                let self = this;
                let responseData = deleteArt(self.art.id);
                responseData.then((res)=>{
                                            if(res.result == 1){
                                                this.deleteVisible = false;
                                                let index = self.artArr.indexOf(self.art);
                                                self.artArr.splice(index,1)
                                                self.$message({
                                                    duration: 2000,
                                                    message: '删除成功',
                                                    type: 'success'
                                                })
                                            }else{
                                                self.$message({
                                                    duration: 2000,
                                                    message: res.msg,
                                                    type: 'error'
                                                })
                                            }
                                        })
            }
        },
        beforeDel(item){
            event.stopPropagation()//阻止事件冒泡
            this.art = item;
            this.deleteVisible = true;
        },
        toedit(item){
            event.stopPropagation()//阻止事件冒泡
            this.$router.push({path:"/card/addArticle",query:{artid:item.id}})
        },
        toUrl(id){
            event.stopImmediatePropagation();//阻止事件捕获
            this.$router.push({path:"/card/article",query:{id:id,uid:sessionStorage.uid}})
        }
    }
}
</script>

<style scoped >
#myCard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #eee;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background:#eee;
    color:#333;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
header .toreturn{
    position: absolute;
    left: 2%;
    color: #333;
    width: 2rem;
}
header .addArt{
    position: absolute;
    right: 2%;
    color: #333;
    width: 2rem;
    font-size: 1.6rem;
}
.artLists{
    position: absolute;
    top: 3rem;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.artList{
    margin-top:1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    margin-bottom: 1rem;
    padding:2% 2%;
}
.artListUp{
    height:2rem;
    display: flex;
    justify-content: space-between;
    line-height:2rem;
}
.artListUp div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.artDetail{
    display:flex;
    height:2rem;
    line-height:2rem;
    font-size: .8rem;
}
.todel{
    padding-left:1rem;
}
.looknum{
    padding-left:1rem;
}
.scroller{
    box-sizing: border-box;
}
</style>
